<?php global $modx; ?>

<div id="<?php echo $plural_name; ?>_wrapper">
	<h2><?php echo $plural_name; ?></h2>
	<div style="float: right;"><h2><a href="#" id="m2m_update_<?php echo $plural_name; ?>"><span style="color: green;font-weight: bold;"> + </span> Create/Update/Delete <?php echo $plural_name; ?></a></h2></div>
<br>
	<?php

	//list all data in dynamic table
	df_list_M2M_table($table_info, $current_doc_id, $plural_name);

	?>
</div>

<script type="text/javascript">
j("#m2m_update_<?php echo $plural_name; ?>").click(function(e){
	<?php
	// $data = Array('plural_name' => $plural_name, 'singular_name' => $singular_name, 'table_info' => $table_info, 'current_doc_id' => $current_doc_id);
		$serialized_tbl = urlencode(serialize($table_info->getPrimaryJoined()));
		echo "var dataString = '&plural_name=$plural_name&singular_name=$singular_name&table_info=$serialized_tbl&current_doc_id=$current_doc_id';";
	?>;
	j.ajax({
		type: "GET",
		data: dataString,
		url: "../assets/plugins/dataFrolic/ajax_O2M.php",
		success: function(resp){
			jQuery("#<?php echo $plural_name; ?>_wrapper").html(resp);
		}
	})
});
</script>